<template>
<label class="bh-radio-button"
	:class="[
		size ? 'bh-radio-button--' + size : '',
		{ 'is-active': value === label },
		{ 'is-disabled': isDisabled },
	]">
	<input v-model="value" :value="label" @change="handleChange" type="radio" name="" :disabled="isDisabled" class="bh-radio-button__orig-radio">
	<span class="bh-radio-button__inner">
		<slot></slot>
		<template v-if="!$slots.default">{{label}}</template>
	</span>
</label>
</template>

<script>
import Emitter from '../../../../src/mixins/emitter';

export default {
	name: 'bh-radio-button',
	mixins: [Emitter],
	props: {
		label: {},
		disabled: Boolean,
	},
	computed: {
		value: {
			get() {
				return this.radioGroup && this.radioGroup.value;
			},
			set(value) {
				this.radioGroup && this.radioGroup.$emit('input', value);//变化时触发父级的值变化
			}
		},
		radioGroup() {
			let parent = this.$parent;

			if (parent.$options.componentName == 'BHRadioGroup') {
				return parent;
			}

			return false;
		},
		size() {
			return this.radioGroup.size;
		},
		isDisabled() {
			return this.disabled || this.radioGroup.disabled;
		},
	},
	methods: {
		handleChange() {
			this.$nextTick(() => {
				this.$dispatch('BHRadioGroup', 'handleChange', this.value);
			});
		}
	},
}
</script>
